<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>Rotating Navigation</title>
</head>
<body>
    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button id="close">
                    <i class="fas fa-times"></i>
                </button>
               <button id="open">
                   <i class="fas fa-bars"></i>
               </button> 
            </div>
        </div>
        <div class="content">
            <h1>Amazin Article</h1>
            <small>Júlia Mendes</small>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi beatae repudiandae aliquam quibusdam sunt facilis maxime suscipit sint assumenda dolorum ab quia cum laboriosam nostrum laudantium nemo, voluptate dolor perferendis architecto in molestias? Dolores hic minus repellat provident animi sit reprehenderit enim deleniti in, illo ut asperiores quas dicta quia nam quibusdam? Animi, optio architecto asperiores velit quidem officiis, quos veritatis impedit, doloribus aliquam numquam saepe illo amet ducimus ipsam corporis. Maiores officiis in vero culpa deleniti rem consequuntur asperiores, unde possimus earum eum magnam, tenetur soluta commodi dolor? Praesentium, unde ipsum rerum eos sed enim itaque voluptate quos. Accusamus!</p>
            <h3>My Dog</h3>
            <img src="https://images.unsplash.com/photo-1531842477197-54acf89bff98?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=401&q=80" alt = "dog"/>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores commodi nihil, cupiditate fugit iusto officia vero, magnam itaque quaerat perferendis totam harum placeat voluptatum est aspernatur atque quae! Pariatur non aliquid libero dicta voluptatem unde aut facere quis assumenda, expedita harum, impedit quaerat cum provident esse saepe ipsa similique beatae, quia minus? Commodi, officia saepe deleniti, voluptatum quam pariatur totam voluptatem quasi enim error repellendus. Veniam architecto autem est magni. Saepe, explicabo. Impedit, nam unde.</p>
        </div>
    </div>

    <nav>
        <ul>
            <li><i class="fas fa-home"></i>Home</li>
            <li><i class="fas fa-user-alt"></i>About</li>
            <li><i class="fas fa-envelope"></i>Contact</li>
        </ul>
    </nav>
    <script src="script.js"></script>    
</body>
</html>

